<template>
	<view class="content">
	 <video
	        class="abcd"
	        ref="movie"
	        :src="datalist.detailUrl"
	        type="video/mp4"
	        controls
	      ></video>
		     <view class="asdasda">
		     	<image class="asdve" round v-if="datalist.simpleUserInfo.avatar != null || ''" :src="datalist.simpleUserInfo.avatar" alt="" @click="actione" />
		     	    <image class="asdve" round v-else src="https://tupian.qqw21.com/article/UploadPic/2020-1/2020127275788240.jpg" alt="" @click="actione" />
					<span class="vdin">{{datalist.simpleUserInfo.nick}}</span>
					<van-button round size="small" v-if="actye == false" type="primary" @click="payto">关注</van-button>		
					<van-button class="chdexh" round size="small" color="#d2d3d5" v-else @click="unfollow">已关注</van-button>
		     </view>
			 <h4 class="hend">{{datalist.title}}</h4>
			 <view class="chantar">
				 <view class="acvbune">
				 <van-field
				 class="acgroup"
				  :left-icon="userInfo"
				   :value="info.text"
				   placeholder="我来说两句"
				   :border="true"
				 	adjust-position
				   @confirm="onChange"
				 />
				  </view>
				  <van-goods-action-icon class="qweafgs" v-if="judg == false" color="#fff" icon="star-o" size="18" :text="datalist.favorites" @click="aaaa()"/>
				  <van-goods-action-icon class="qweafgs" v-else icon="star" color="#ff7144" size="18" :text="datalist.favorites" @click="aaaa()"/>
				  <van-goods-action-icon class="qweafgs" v-if="Linkche == false" color="#fff" icon="good-job-o" size="18" :text="datalist.thumbsUp" @click="give()"/>
				  <van-goods-action-icon class="qweafgs" v-else icon="good-job" color="#ff7144" size="18" :text="datalist.thumbsUp" @click="give()"/>
				  <van-goods-action-icon class="qweafgs" icon="chat-o" size="18" color="#fff" :text="datalist.commentNumber" @click="toggleMask()"/>
			 </view>
			<!-- 弹出框 -->
			    <van-popup
				class="acty-acenpopu"
			      :show="show" 
				  close-on-click-overlay
				  :safe-area-inset-top="true"
				  lock-scroll
			      position="bottom"
				   custom-style="height: 55%" 
			      @close="onClose">
				  <view class="catea">
			    	全部评论
					<van-icon class="caty-icped" size="35upx" name="cross" @click="onClose"/>
			    </view>
				<view v-for="(item,index) in pary" :key="pary" data-type="1">
				        <image class="imgcound" :src="item.userAvatar" alt="" @click="actionoper(index)"/>
				        <span class="acty-cate">{{item.userNick}}</span>
				        <view class="auyrea">{{item.text}}</view>
				      <van-icon
					  style="background-color: #fff;"
				      v-if="item.thumbsUp == false"
				        class="chendft"
				        name="good-job-o"
				        color="#A4A4A4"
				      	@click="pvote(index)"
				      />
				      <van-icon
				        v-else
				        class="chendft"
				        name="good-job"
				        color="#ff7144"
				      	@click="hcadell(index)"
				      />
					    <span class="actyuse">{{item.thumbsUpNumber}}</span>
				      
					   <span class="pojnf">{{item.commentTime.split(' ')[0]}}</span>
					<!-- 子评论 -->
					<view v-for="(t,c) in pary" :key="pary">
					    <view v-for="(a,b) in t.subCommentResp" :key="t.subCommentResp" v-if="a.articleCommentId == item.commentId" class="aaa">
							<image class="imgco" :src="a.userAvatar" alt="" @click="accadd(c,b)"/>
							<span class="acty-cate">{{a.userNick}}</span>
							<view class="acte-after">{{a.text}}</view>		
							<span class="pojnf">{{a.commentTime.split(' ')[0]}}</span>	
							<van-icon
								v-if="a.thumbsUp == false"
								class="chendft"
								name="good-job-o"
								color="#A4A4A4"
								@click="xpovet(c,b)"
								/>
							 <van-icon
								v-else
								class="chendft"
								name="good-job"
								
								color="#ff7144"
								@click="callxpty(c,b)"
								 />
								  <span class="actyuse">{{a.thumbsUpNumber}}</span>
					   </view>
					   </view>
			<!-- 查看更多 -->
			<view class="acdipe" v-if="item.subCommentResp[2]">
			   <view class="acrt-opin" @click="evenmore(index)">查看更多&nbsp;></view>				
					</view>
					   </view>
					   <van-field
					   class="acfieter"
					   style="background-color: #f2f2f2;"
					    :left-icon="userInfo"
					     :value="info.text"
					     placeholder="我来说两句"
					     :border="true"
					     @confirm="onChange"
					   />
				</van-popup>
	</view>
</template>

<script>
	import Api from '../../http/api.js'
	export default {
		data(){
			return{
				aa:'',
				userid:'',
				userInfo:'', 
				datalist:{},
				isplay:true,
			    actye:'',
				judg:'',
				Linkche:'',
				show:false,
				uesepe:{
					cancel:"",
					articleId:''
				},
				info:{
					articleId:'',
					text:''
				},
				q:{
				   index:1,
				   size:5,
				   articleId:''
				 },
				 z:{
				 	index:1,
				 	size:10,
				 	commentId:'',
				 	skipNumber:0
				 },
				 pary:[],
			}
		},
		onLoad() {
			this.loadData()
			this.loachedfg()
		},
		  
		methods:{
			async loadData(){
			var pages = getCurrentPages();   //获取加载的页面
			var currentPage = pages[pages.length - 1];  //获取当前页面的对象
			this.aa = currentPage.options.id //当前页面url的参数
			this.userid = currentPage.options.user //当前页面url的参数
			this.userInfo = currentPage.options.userInfo //当前页面url的参数
			let result = await Api.getList({articleId:this.aa});
		     this.datalist = result.data
			 
			 // 评论
			 this.q.articleId = currentPage.options.id
			 const refs = await Api.discuss(this.q)
			 this.pary = refs.data.data
		},
      // 判断是否关注
      async loachedfg(){
      		 // 文章收藏判断
      		const red = await Api.judgment({articleId:this.datalist.articleId})
      		this.judg = red.data
      		// 文章点赞判断
      		const reh = await Api.Liking({articleId:this.datalist.articleId})
      		this.Linkche = reh.data
      		 // 评论点赞判断
      		 const reg = await Api.attention({userId:this.userid})
      		this.actye = reg.data
      },  
	  // 关注
	  async payto(){
	  		 const reg = await Api.concern({userId:this.userid})
	  		 if(reg.code != "200"){
	  			 this.$api.msg("用户不存在");
	  		 }
	  		
	  		 this.loachedfg()
	  },
	  // 取消关注
	  async unfollow(){
	  		 const reg = await Api.unfollow({userId:this.userid})
	  		 this.loachedfg()
	  },
	  // 收藏
	  async aaaa(){
	  	this.uesepe.articleId = this.datalist.articleId
	  	this.uesepe.cancel = this.judg
	  	const ress = await Api.collect(this.uesepe)
	   	this.loachedfg()
	  },
	  // 文章点赞
	  async give(){
	  		 this.uesepe.articleId = this.datalist.articleId
	  		 this.uesepe.cancel = this.Linkche
	  		 const rej = await Api.giveat(this.uesepe)
	  		 this.loachedfg()
	  },
	  // 文章评论
	  async onChange(event){
	  		  if(event.detail == ''){
	  			  return this.$api.msg('评论不能为空');
	  		  }
	  		 this.info.text = event.detail
	  		 this.info.articleId = this.aa
	  		
	  		 const rea = await Api.essayist(this.info)
	  		 if(rea.code == 200){
	  		 	this.$api.msg('评论成功');
	  		   event.detail = ''
	  		   this.info.text = ''
	  		 } 
	  		 this.loadData()
	  },
	  // 弹出框
	   onClose() {
	     this.show = false
	  		this.aceq = false
	    },
	  // 查看全部评论
	    toggleMask(){
	  	   this.q.size = 100
	  	   this.show = true
	  	   this.loadData();
	  },
	  // 评论点赞
	  async pvote(index){
	  		 const commid = this.pary[index].commentId
	  		 const ref = await Api.upvote({commentId:commid})
	  		  this.loadData()
	  },
	  // 取消点赞
	  async hcadell(index){
	  		 const commid = this.pary[index].commentId
	  		 const red = await Api.callpvote({commentId:commid})
	  		  this.loadData()
	  },
	  // 用户评论点赞
	  async xpovet(c,b){
	  		 this.evs = true
	  		 const commid = this.pary[c].subCommentResp[b].commentId
	  		 const res = await Api.cpovet({commentId:commid})
	  		 this.loadData()
	  },
	  // 用户评论取消点赞
	  async callxpty(c,b){
	  		 const commid = this.pary[c].subCommentResp[b].commentId
	  		 const res = await Api.callcpon({commentId:commid})
	  		 this.loadData()
	  },
	  // 查看更多
	  async evenmore(index){
	  		 this.z.commentId = this.pary[index].commentId
	  		 const res = await Api.subcomment(this.z)
	  		 this.pary[index].subCommentResp = res.data.data
	  		 console.log(this.pary[index].subCommentResp)
	  },
	  // 跳转用户详细资料
	  actione(){
	     uni.navigateTo({
	     	url: `/pages/components/information?id=`+this.datalist.simpleUserInfo.userId,
	     	})
	  },
	  actionoper(index){
	  	   uni.navigateTo({
	  	   	url: `/pages/components/information?id=`+this.pary[index].userId,
	  	   	})
	  },
	  accadd(c,b){
		uni.navigateTo({
			url: `/pages/components/information?id=`+this.pary[c].subCommentResp[b].userId,
			})
		  console.log(c,b) 
	  }
	},
	}
</script>

<style lang="scss">
	.content{
		width: 100%;
		height: 95%;
		
	}
	.asdasda{
	  width:50%;
	  position: absolute;
	  bottom:20%;
	 left: 10px;
	 z-index: 990;
	}
	.asdve{
	 width: 35px;
	  height: 35px;
	  margin-right: 10px;
	  border-radius: 50%;
	  z-index: 990;
	}
	.vdin{
	    display: inline-block;
	  transform: translateY(-70%);
	  margin-right: 15px;
	  font-weight: 400;
	  color: #fff;
	  font-size: 12px;
	}
   .van-button--primary{
	   background-color: #ff7144 !important;
	   border: 1px solid #ff7144 !important;
	   display: inline-block !important;
	   transform: translateY(-30%) !important;
	   color: #fff !important;
   }
   .van-button__text{
	   transform: translateY(3%);
	   display: inline-block;
   }
	.hend{
	 color: #fff;
	 position: absolute;
	 bottom:12%;
	 left: 15px;
	 font-weight: 400;
	}
	.abcd {
  display: block;
  object-fit: contain;
  user-select: text; 
  position: fixed !important;
  top: 0px !important;
  right: 0px !important;
  bottom: 0px !important;
  left: 0px !important;
  box-sizing: border-box !important;
  min-width: 0px !important;
  max-width: none !important;
  min-height: 0px !important;
  max-height: none !important;
  width: 100% !important;
  height: 92% !important;
  transform: none !important;
  margin: 0px !important;
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: black;
}
.chantar{
	position: fixed;
		bottom: 0;
		background-color: #000;
		width: 100%;
		height: 120upx;
		border-top: 1px solid #333333;
		.acgroup{
			background-color: #000;
		}
}
	.acvbune{
		width: 55%;
		display: inline-block;
		transform: translateY(10upx);
		background-color: #000;
	}
	.van-field__control{
		width: 100% !important;
		border-radius: 25px !important;
		background-color: #333333 !important;
		padding-left: 50upx !important;
		color: #fff !important;
	}
	.van-icon__image{
		display: inline-block;
		border-radius: 50% !important;
		position: absolute;
		left: 50upx;
		z-index: 990;
	}
	.van-cell{
		background-color: rgba(0, 0, 0, 0) !important;
	}
	.qweafgs{
		display: inline-block;
		background-color: #000;
	}
	.van-button--large{
		background-color: #000 !important;
	}
	.chdexh {
	  display: inline-block;
	position: relative;
	top: -10px;
	width: 17%;
	height: 30px;
	
	}
	.acty-acenpopu{
		position: fixed;
		bottom: 0;
		background-color: #fff;
		width: 100%;
	
	}
	.catea{
		position: fixed;
		bottom: 55%;
		float: left;
		width: 100%;
		height: 75rpx;
		line-height: 75rpx;
		padding-left: 35upx;
		background-color: #fff;
		z-index: 999;
		.caty-icped{
			
			display: inline-block;;
			float: right;
			margin-right: 35px;
			line-height: 75rpx;
		}
	}
	.acfieter{
		position: fixed;
		bottom: 0upx;
		width: 90%;
		height: 70upx;
		background-color: #fff;
		padding-bottom: 10upx;
	}
	
	// 弹出框
	.acty-acenpopu{
		position: fixed;
		bottom: 0;
		background-color: #fff;
		width: 100%;
	z-index: 999;
	}
	.catea{
		position: fixed;
		bottom: 55%;
		float: left;
		width: 100%;
		height: 75rpx;
		line-height: 75rpx;
		padding-left: 35upx;
		background-color: #fff;
		z-index: 999;
		.caty-icped{
			display: inline-block;;
			float: right;
			margin-right: 35px;
			line-height: 75rpx;
		}
	}
	.imgcound{
		  margin-left: 6px;
		 margin-right: 10px !important;
		  width: 70rpx;
		  height: 70rpx;
		   border: 1px solid #858585;
		  border-radius: 50%;
	}
	.acty-cate{
	    display: inline-block;
	    transform: translateY(-100%);
	    color: #858585;
	    font-size: 14px;
	}
	.acte-after{
		width: 60%;
		margin-left: 65px;
		 margin-bottom: 20px;
		 transform: translateY(-15px);
			font-size: 14px;
	}
	.auyrea{
	     width: 60%;
	    margin-left: 50px;
	    margin-bottom: 20px;
	    transform: translateY(-15px);
		font-size: 14px;
	}
	.chendft {
	  float: right;
	  position: relative;
	  bottom: 100upx;
	  margin-right: 50upx;
	  background-color: #fff;
	}
	.imgco{
		margin-left: 40px;
		margin-right: 10px !important;
		transform: translateY(-70%);
		 width: 45rpx;
		 height: 45rpx;
		 border: 1px solid #858585;
		 border-radius: 50%;
	}
	.pojnf{
	    display: inline-block;
	    color: #858585;
	    font-size: 12px;
	    margin-left: 50px;
	    transform: translateY(-30px);
	}
     .actyuse{
		 display: inline-block;
		 float: right;
		 position: relative;
		 bottom: 69upx;
		 font-size: 24rpx;
		 margin-right: -23upx;
		 background-color: #fff;
		 color: #c6c6c6;
	 }
	 .acdipe{
	 	
	 	text-align: center;
	 	transform: translateX(5%);
	 	color: #223152;
	 	font-size: 26rpx;
	 	font-weight: 500;
	 }

</style>